<template>
  <div class="qiyePIndex">
    <userHeader />
    <div class="breadClum">
      <span>
          <router-link :to="{path:'/pageIndex'}">  <a class="bread1">当前位置：首页  >  </a></router-link>
          <router-link :to="{path:'/query'}"> <a class="bread2">综合查询  ></a></router-link>
         <a class="bread2">企业评价工作进度表</a>
      </span>
    </div>
    <div class="companyListIndex">
      <div class="container">
        <ul>
          <li>
            <span class="text">开展评价企业总数:</span>
            <span class="nums">{{total_company}}</span>
          </li>
          <li>
            <span class="text">按期完成评价工作企业:</span>
            <span class="green nums">{{ontime_company}}</span>
          </li>
          <li>
            <span class="text">超期完成评价工作企业:</span>
            <span class="yellow nums">{{overdue_company}}</span>
          </li>
          <li>
            <span class="text">未完成评价工作企业:</span>
            <span class="dangerRed nums">{{unfinished_company}}</span>
          </li>
          <li>
            <span class="text">企业评价工作完成率:</span>
            <span class="nums">{{company_rate}}</span>
          </li>
        </ul>
      </div>
    </div>

    <div class="navList">
      <!--评价期间-->
      <el-dropdown  trigger="click" @command="setEvaluationPeriod" style="margin-right: 6px;cursor:pointer;background: #8cc34b;padding:10px 24px;color:#fff;border-radius:4px;text-align: center;" >
          <span class="el-dropdown-link">
            {{evaluationPeriodSelect}}<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
        <el-dropdown-menu slot="dropdown" style="padding: 0 16px;">
          <el-dropdown-item v-for="item in evaluationPeriodList" :command="item.evaluation_period"
                            :key="item.evaluation_period">{{item.evaluation_period}}年
          </el-dropdown-item>
          <el-dropdown-item  v-if="evaluationPeriodList.length==0" command="none">
            暂无数据
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <!--评价类型-->
      <div class="navListRight">
        <el-date-picker
          v-model="value13"
          type="daterange"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :default-time="['00:00:00', '23:59:59']">
        </el-date-picker>
        <el-button @click="downLoadFile" :loading="downloadLoading" class="download-file" style="" type="primary" icon="el-icon-download" size="mini"></el-button>
      </div>
    </div>
    <el-table
      v-loading="loading"
      :height="height"
      :data="tableData">
      <el-table-column
        prop="numrow"
        label="编号"
      >
      </el-table-column>
      <el-table-column
        prop="company_name"
        label="公司名称"
        width="200"
      >
      </el-table-column>
      <el-table-column
        prop="evaplan_type_name"
        label="评价类型"
      >
      </el-table-column>

      <el-table-column
        label="评价测试环节及进度"
      >
        <el-table-column
          prop="design_evaluation"
          label="设计评价"
          width="40"
        >
          <template slot-scope="scope">
            {{scope.row.design_evaluation}}

          </template>
        </el-table-column>
        <el-table-column
          prop="execute_evaluation"
          label="执行评价"
          width="40"
        >
          <template slot-scope="scope">
            {{scope.row.execute_evaluation}}

          </template>
        </el-table-column>
        <el-table-column
          width="40"
          label="缺陷认定"
          prop="defects_identified"
        >
          <template slot-scope="scope">
            {{scope.row.defects_identified}}

          </template>
        </el-table-column>
        <el-table-column
          width="70"
          label="整改任务分配"
          prop="task_allocation"
        >
          <template slot-scope="scope">
            {{scope.row.task_allocation}}

          </template>
        </el-table-column>
        <el-table-column
          width="70"
          label="编制整改计划"
          prop="compile_rectificationplan"
        >
          <template slot-scope="scope">
            {{scope.row.compile_rectificationplan}}

          </template>
        </el-table-column>
        <el-table-column
          width="70"
          label="整改计划确认"
          prop="affirm_rectificationplan"
        >
          <template slot-scope="scope">
            {{scope.row.affirm_rectificationplan}}
          </template>
        </el-table-column>
        <el-table-column
          width="70"
          label="落实整改结果"
          prop="implement_rectificationresult"
        >
          <template slot-scope="scope">
            {{scope.row.implement_rectificationresult}}

          </template>
        </el-table-column>
        <el-table-column
          width="40"
          label="评价报告"
          prop="evaluation_report"
        >
          <template slot-scope="scope">
            {{scope.row.evaluation_report}}

          </template>
        </el-table-column>
        <el-table-column
          width="152"
          label="测试工作截止日"
          prop="evaluation_finishtime"
        >

        </el-table-column>
        <el-table-column
          width="120"
          label="工作进度"
          prop="work_schedule"
        >
          <template slot-scope="scope">
            <div >
              <!--0  未完成  1按期 2 超期-->
              <el-progress :text-inside="true" :stroke-width="18" :percentage=scope.row.work_schedule  :color="color(scope.row.work_schedule,scope.row.finish_state)"></el-progress>
            </div>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column
        prop="progress"
        label="流程测试完成情况"
      >
        <el-table-column
          label="评价流程总数"
          prop="total_process"
        >
        </el-table-column>
        <el-table-column
          label="按期完成流程"
          prop="ontime_process"
        >
        </el-table-column>
        <el-table-column
          prop="overdue_process"
          label="超期完成流程"
        >
        </el-table-column>
        <el-table-column
          prop="unfinished_process"
          label="未完成流程"
        >
        </el-table-column>

        <el-table-column
        prop="process_rate"
          label="流程测试完成率"
        >
        </el-table-column>

      </el-table-column>
      <el-table-column
        prop="progress"
        label="评价点测试完成情况"
      >
        <el-table-column
          label="评价点总数"
          prop="total_point"
        >
        </el-table-column>
        <el-table-column
          label="按期完成评价点"
          prop="ontime_point"
        >
        </el-table-column>
        <el-table-column
          prop="overdue_point"
          label="超期完成评价点"
        >
        </el-table-column>
        <el-table-column
          prop="unfinished_point"
          label="未完成评价点"
        >
        </el-table-column>

        <el-table-column
        prop="point_rate"
          label="评价点测试完成率"
        >
        </el-table-column>
      </el-table-column>
    </el-table>
    <!--分页器-->
    <div class="pagination">
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page.sync="page"
        :page-size="limit"
        background
        layout="prev, pager, next, jumper"
        :page-count="pages">
      </el-pagination>
    </div>
  </div>
</template>
<script>
  import userHeader from '@/components/header.vue';
  import {mapState} from 'vuex';
  export default({
    computed:{
      ...mapState({
        height:state=>sessionStorage.getItem('height')||state.app.height,
      }),
      color(){
        return function (data,state) {
            if(state==1){
              return '#8cc34b'
            }else if(state==0){
              return '#f66c6c'
            }else if(state==2){
              return '#f0b914'
            }
        }
      }
    },
    data(){
      return {
        commentCompany:"评价期间",
        evaluationPeriodSelect:'评价期间',
        categyType:"评价企业",
        hideUl:false,
        tableData:[],
        evaluationPeriodList:[],
        downloadLoading:false,
        value13: '',
        total_company:0,
        ontime_company:0,
        overdue_company:0,
        unfinished_company:0,
        company_rate:'0%',
        loading:true,
        limit: 10,
        page: 1,
        pages: 1,
      }
    },
    components:{
      userHeader,
    },
    methods:{
      handleCurrentChange(val){
        this.page = val;
        this.loading =true;
        this.initData(this.page);
      },
      handleCommentCompany(command){
        this.commentCompany =command;
      },
      //评价期间选择弹出
      showCommentPeriod(){
        this.isShowCommentPeriod = true;
      },
      //评价期间选择关闭
      selectCommentPeriod(){
        this.isShowCommentPeriod = false;
      },
      //评价类型选择
      handleCommentType(command){
        console.log(command)
      },
      //选择期间
      setEvaluationPeriod(command) {
        if(command=='none'){
          return false
        };
        this.evaluationPeriodSelect = command;
        this.EvaluationPeriodId =command;
        this.loading=true;
        this.initData(this.page,this.EvaluationPeriodId);
      },
      getCompanyEvaluationPeriod() {
        return this.axios.get('/api/v1/flow/controlindicators')
      },
      getEvaluationPeriod(){
        this.getCompanyEvaluationPeriod().then(res => {
          console.log(res.data.data)
          if (res.data.code == 0) {
            this.evaluationPeriodList = res.data.data
          }
        });
      },
      downLoadFile(){
        if(this.tableData.length>0){
          this.downloadLoading = true
          import('../utils/export2Excel').then(excel => {
            const filterVal = ['numrow', 'company_name','evaplan_type_name', 'design_evaluation', 'execute_evaluation', 'defects_identified','task_allocation','compile_rectificationplan','affirm_rectificationplan','implement_rectificationresult','evaluation_report',
            'evaluation_finishtime','work_schedule','total_process','ontime_process','overdue_process','unfinished_process','process_rate','total_point','ontime_point',
              'overdue_point','unfinished_point','point_rate']
            // const filterVal = ['编号', '评价流程', '控制点', '控制数量', '设计缺陷','执行缺陷','设计和执行缺陷','一般缺陷','重要缺陷','重大缺陷','标准分值','设计分值','比率(%)']
            const tHeader = ['编号', '公司名称', '评价类型', '设计评价', '执行评价','缺陷认定','整改任务分配','编制整改计划','整改计划确认','落实整改计划','评价报告','测试工作截止日','工作进度','评价流程总数',
            '按期完成流程','超期完成流程','未完成流程','流程测试完成率','评价点总数','按期完成评价点','超期完成评价点','未完成评价点','评价点测试完成率']
            const list = [...this.tableData]
            const data = this.formatJson(filterVal, list);
            excel.export_json_to_excel({
              header: tHeader,
              data:data,
              filename:"企业评价工作进度表（第"+this.page+"页）",
              autoWidth: true,
              bookType: "xlsx"
            })
            this.downloadLoading = false
          })
        }else {
          this.$alert("表格无数据，无法下载","提示")
        }
      },
      formatJson(filterVal, jsonData) {
        return jsonData.map(v => filterVal.map(j => v[j]))
      },
      initData(page,evaluation_period=''){
          this.axios.get('/api/v1/enquiry/evaluationcompanytempo',{
              params:{
                limit:10,
                page:page,
                evaluation_period:evaluation_period
              }
          }).then((res)=>{
              if(res.data.code==0){
                  this.loading=false;
                  this.tableData=res.data.data.list;
                  this.page = res.data.pagination.page;
                  this.limit = res.data.pagination.limit;
                  this.pages = res.data.pagination.pages;
                  console.log(this.tableData)
              }
          })
      },
      getBasicData(){
        this.axios.get(' /api/v1/enquiry/evaluationcompanybasic').then((res)=>{
          if(res.data.code==0){
            this.total_company=res.data.data.total_company;
            this.ontime_company=res.data.data.ontime_company;
            this.overdue_company=res.data.data.overdue_company;
            this.unfinished_company=res.data.data.unfinished_company;
            this.company_rate=res.data.data.company_rate;
          }
        })
      }
    },
    mounted(){
        this.initData(this.page);
        this.getBasicData();
        this.getEvaluationPeriod();
    }
  })
</script>
<style scoped="">
  .qiyePIndex{
    width: 100%;
    height: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding:10px;
  }
.qiyePIndex .companyListIndex .container{
    overflow: hidden;
    margin-top: 20px;
    margin-bottom: 10px;
  }
.qiyePIndex  .companyListIndex ul{
    float: right;
    overflow: hidden;
  }
.qiyePIndex  .companyListIndex ul li{
    float: left;
    margin-right: 20px;
  }
.qiyePIndex  .companyListIndex ul li  span.nums{
    color: #333;
    display: inline-block;
    padding: 4px 0px;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    width: 50px;
    text-align: center;


  }
.qiyePIndex .companyListIndex ul li  span.green{
    background: #8cc34b;
    color: white;
  }
.qiyePIndex  .companyListIndex ul li  span.yellow{
    background: #f0b914;
    color: white;
  }
.qiyePIndex  .companyListIndex ul li  span.dangerRed{
    background: #f66c6c;
    color: white;
  }
.qiyePIndex .navList .sp1 span{
    position: relative;
  }
.qiyePIndex .navList .sp1>span:after{
    position: absolute;
    right: -10px;
    top:50%;
    width:8px;
    height: 5px;
    margin-top: -3px;
    content:'';
    background-image: url("../../static/images/icon-down.png");
    background-repeat: no-repeat;
    background-position: center;

  }
.qiyePIndex  .navList .sp1 .hideUl{
    position: absolute;
    left: 0;
    top: 46px;
    width: 160px;
    z-index: 999;
    background: white;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    padding-top: 6px;

  }
.qiyePIndex  .navList .sp1 .hideUl li{
    height: 34px;
    font-size: 14px;
    line-height: 34px;
    color: #000;
    text-align: center;
  }
.qiyePIndex .navList .sp1 .hideUl li:nth-child(1){
    background: #f2f5fc;
  }
.qiyePIndex  .navList .sp1 .hideUl li:nth-child(1) span{
    color: #7d9bcf;
  }
.qiyePIndex .navList .sp1 .hideUl li:last-child span{
    color: #fff;
  }
.qiyePIndex  .navList .sp1 .hideUl li:last-child{
    background: #769dd6;
  }
  .qiyePIndex >>>  .el-table thead th{
    background: #d3e9bb;
  }
  .qiyePIndex >>> .el-table thead {
    color: #5d9120;
    text-align: center;
  }
  .qiyePIndex >>> .el-table  .cell{
    text-align: center;
    font-size: 14px;
    padding: 0 5px;
  }

  .qiyePIndex >>>  .el-table td, .el-table th.is-leaf{
    border-bottom: 1px solid #aac983;
  }
  .qiyePIndex >>>  .el-table .el-table--border, .el-table--group{
    border: 1px solid #aac983;
  }
  .qiyePIndex >>> .el-table td, .qiyePIndex >>> .el-table th.is-leaf{
    border-bottom: 1px solid #aac983;
    border-right: 1px solid #aac983;
  }
  .qiyePIndex >>> .el-table--border th,  .qiyePIndex .el-table__fixed-right-patch{
    border-bottom:1px solid #aac983;
  }
  .qiyePIndex >>> .el-table--border td, .qiyePIndex >>> .el-table--border th, .qiyePIndex >>> .el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed{
    border-right: 1px solid #aac983;
  }

  .qiyePIndex >>> .el-table__body  .el-table__row td .cell .s1 .el-checkbox__inner,
  .qiyePIndex >>> .el-table__body  .el-table__row td .cell .s2 .el-checkbox__inner{
    width: 14px;
    height: 14px;
  }
  .qiyePIndex >>> .el-table__body  .el-table__row td .cell .s2{
    margin-left: 0 !important;
  }
  .qiyePIndex >>> .el-table__body .el-checkbox__inner::after{
    left: 3px;
    width: 4px;
    height: 6px;
    -webkit-transform: rotate(45deg) scaleY(1);
    transform: rotate(45deg) scaleY(1);
  }
  .qiyePIndex >>> .el-table__body  .el-checkbox__input .el-checkbox__inner{
    background: #d5d5d5;
    border-color: #d5d5d5;
  }
  .qiyePIndex >>> .el-table__body  .el-checkbox__input.is-checked .el-checkbox__inner,
  .qiyePIndex >>> .el-table__body  .el-checkbox__input.is-indeterminate .el-checkbox__inner{
    background: #8bc34a;
    border-color: #8bc34a;
  }
  .qiyePIndex >>> .el-table__body   .el-checkbox__inner:hover{
    border-color: #d5d5d5;
  }
  .qiyePIndex >>> .el-progress-bar__inner{
    text-align: center;
  }
  .qiyePIndex .download-file {
    margin-right: 36px;
    float: right;
    padding: 7px 8px;
    background: #769dd6;
    border: none;
    font-size: 20px;
    text-align: center;
    cursor: pointer;
  }
  .qiyePIndex>>> .navList>div{
    background:none;
  }
  .qiyePIndex>>> .navList{
    padding-bottom:12px;
    margin-bottom:12px;
  }
  .qiyePIndex>>> .navList .navListRight{
    float: right;
    vertical-align: top;
  }
  .qiyePIndex>>> .navList .navListRight  .el-range-editor.el-input__inner{
    padding: 0px 10px;
    height: 34px;
    line-height: 34px;
  }
  .qiyePIndex>>> .navList .navListRight  .el-date-editor{
    width: 200px;
    margin-right: 10px;
  }
  .qiyePIndex>>> .navList .navListRight .el-input__inner .el-range-input{
      width: 80px;
    line-height: 30px;
  }
  @media screen and (max-width: 1400px) {
    .qiyePIndex{
      padding: 6px;
    }
  }
</style>

